<template>
  <el-card>
    <el-row style="padding: 10px 30px;text-align: center;">
      <h2>员工导入</h2>
      <el-alert
        title="每次导入仅可添加1000名员工，姓名、手机、入职时间、聘用形式为必填项"
        type="warning"
        show-icon
        :closable="false"
      />
    </el-row>
    <div class="upload-excel">
      <div class="btn-upload">
        <el-button
          :loading="loading"
          size="mini"
          type="primary"
          @click="handleUpload"
        >
          点击上传
        </el-button>
      </div>

      <input
        ref="excel-upload-input"
        class="excel-upload-input"
        type="file"
        accept=".xlsx, .xls"
        @change="handleClick"
      >
      <div
        class="drop"
        @drop="handleDrop"
        @dragover="handleDragover"
        @dragenter="handleDragover"
      >
        <i class="el-icon-upload" />
        <span>将文件拖到此处</span>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'UploadExcel',
  data() {
    return {
      loading: false
    }
  },
  methods: {
    handleClick() {},
    handleUpload() {},
    handleDrop() {},
    handleDragover() {}
  }
}
</script>

<style scoped lang="scss">
.el-card {
  margin: 20px;

  .upload-excel {
    display: flex;
    justify-content: center;
    margin: 50px 0 50px 0;
    .excel-upload-input {
      display: none;
      z-index: -9999;
    }
    .btn-upload,
    .drop {
      border: 1px dashed #bbb;
      width: 350px;
      height: 160px;
      text-align: center;
      line-height: 160px;
    }
    .drop {
      line-height: 80px;
      color: #bbb;
      i {
        font-size: 60px;
        display: block;
      }
    }
  }
}
</style>
